<template>
  <el-button
    :size="btnSize"
    :type="btnType"
    :plain="btnPlain"
    :round="btnRound"
    :circle="btnCircle"
    :loading="btnLoading"
    :disabled="btnDisabled"
    :icon="btnIcon"
    :autofocus="autofocus"
    :native-type="nativeType"
    @click="openAlert"
  >{{text}}</el-button>
</template>

<script>
  export default {
    name: "alertButton",
    props: {
      text: {
        type: String
      },
      btnSize: {
        type: String,
        default: 'medium'
      },
      btnType: {
        type: String,
        default: 'primary'
      },
      btnPlain: {
        type: Boolean,
        default: false
      },
      btnRound: {
        type: Boolean,
        default: false
      },
      btnCircle: {
        type: Boolean,
        default: false
      },
      btnLoading:{
        type: Boolean,
        default: false
      },
      btnDisabled: {
        type: Boolean,
        default: false
      },
      btnIcon: {
        type: String,
        default: ''
      },
      autofocus: {
        type: Boolean,
        default: false
      },
      nativeType:  {
        type: String,
        default: 'button'
      },
      alertType: {
        type: String,
        default: 'info'
      },
      alertMessage: {
        type: String,
        default: ''
      },
      rules: {
        type: Function,
        default: null
      }
    },
    methods:{
      openAlert(){
        if(this.rules()) {
          this.$emit('open')
        } else {
          this.$message({
            message: this.alertMessage,
            type: this.alertType
          })
        }
      }
    }
  }
</script>

<style scoped>

</style>
